<template>
  <div class="container btm-pop deal-info">
    <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF"
      left-icon="left" status-bar title="确认支付凭证" />

    <transition name="van-slide-right">
      <div v-show="stepIndex === 1" class="transition-div">
        <div class="container deal-content">
          <div class="flex-between-center step-list">
            <div class="flex-between-center step-item" v-for="(item,index) in changeStepList" :key="index"
              :class="item.status == 1 ? '' : 'active-step'">
              <div class="step-line" v-if="index != 0"></div>
              <div class="step-info">
                <image src="../../assets/deal/inactive-icon.png" mode="" class="step-icon" v-if="item.status == 1">
                </image>
                <image src="../../assets/deal/active-icon.png" class="step-icon" v-if="item.status == 2"></image>
                <div class="step-title">{{item.name}}</div>
              </div>
            </div>
          </div>
          <div class="deal-card">
            <div class="deal-title">{{type == 'buy' ? '卖方' : '买方'}}信息</div>
            <div class="card-div">
              <div class="flex-between-center user-top">
                <div class="user-name">{{user.user}}</div>
                <div class="flex-between-center user-pay">
                  <image :src="item == 1 ? alipayImg : item == 2 ? wechatImg : item == 3 ? bankImg : ''" class="pay-img"
                    v-for="(item,index) in payType" :key="index" v-if="item != 4"></image>
                </div>
              </div>
              <div class="flex-between-center user-btm">
                <div class="user-tel">电话：<span class="font-family-din">{{user.tel}}</span></div>
                <a :href="'tel:'+user.tel" class="user-phone"><img src="@/assets/deal/phone.png" alt=""
                    class="user-phone"></a>
              </div>
            </div>
          </div>
          <div class="deal-card">
            <div class="deal-title">{{type == 'buy' ? '购买' : '卖出'}}的货币信息</div>
            <div class="card-div">
              <div class="flex-between-center user-btm">
                <div class="user-tel">数量：<span class="font-family-din">{{coin.num}}</span></div>
                <div class="user-tel">单价（CYN）<span class="font-family-din">{{coin.price}}</span></div>
              </div>
              <div class="flex-between-center user-btm">
                <div class="user-tel">交易金额（CYN）：<span class="font-family-din price">{{coin.total_price}}</span></div>
              </div>
            </div>
          </div>
          <div class="deal-card" v-if="type == 'buy' && coin.status == 1">
            <div class="card-div" v-if="payWay.length > 0">
              <div class="flex-between-center payment-change">
                <div class="flex-between-center change-left">
                  <img
                    :src="payWay[acPayIndex].status == 1 ? alipayImg : payWay[acPayIndex].status == 2 ? wechatImg : payWay[acPayIndex].status == 3 ? bankImg : payWay[acPayIndex].status == 4 ? USDTImg : ''"
                    alt="" class="pay-img">
                  <span>卖方{{payWay[acPayIndex].status == 1 ? '支付宝' : payWay[acPayIndex].status == 2 ? '微信' : payWay[acPayIndex].status == 3 ? '银行卡' : payWay[acPayIndex].status == 4 ? 'USDT' : ''}}收款</span>
                </div>
                <div class="flex-between-center change-left" @click="changePay">
                  <img src="../../assets/deal/change-icon.png" alt="" class="change-img">
                  <span>切换支付方式</span>
                </div>
              </div>
              <div class="" v-if="payWay[acPayIndex].status == 1 || payWay[acPayIndex].status == 2">
                <div class="flex-between-center pay-line">
                  <div>{{payWay[acPayIndex].status == 1 ? '支付宝' : payWay[acPayIndex].status == 2 ? '微信' : ''}}昵称</div>
                  <div class="flex-between-center pay-line-right">
                    <div class="line-value">{{payWay[acPayIndex].name}}</div>
                    <img src="../../assets/deal/copy-icon.png" alt="" class="pay-copy"
                      v-clipboard:copy="payWay[acPayIndex].name" v-clipboard:success="copy" v-clipboard:error="onError">
                  </div>
                </div>
                <div class="flex-between-center pay-line">
                  <div>{{acPayIndex == 0 ? '支付宝' : acPayIndex == 1 ? '微信' : ''}}账号</div>
                  <div class="flex-between-center pay-line-right">
                    <div class="line-value">{{payWay[acPayIndex].account_num}}</div>
                    <img src="../../assets/deal/copy-icon.png" alt="" class="pay-copy"
                      v-clipboard:copy="payWay[acPayIndex].account_num" v-clipboard:success="copy"
                      v-clipboard:error="onError">
                  </div>
                </div>
                <div class="pay-ewm-div">
                  <img :src="payWay[acPayIndex].receive_qrcode" alt="" class="img-s-h" @click="blowImg('code')">
                </div>
              </div>
              <div class="" v-else-if="payWay[acPayIndex].status == 3">
                <div class="flex-between-center pay-line">
                  <div>银行卡号</div>
                  <div class="flex-between-center pay-line-right">
                    <div class="line-value">{{payWay[acPayIndex].bank_num}}</div>
                    <img src="../../assets/deal/copy-icon.png" alt="" class="pay-copy"
                      v-clipboard:copy="payWay[acPayIndex].bank_num" v-clipboard:success="copy"
                      v-clipboard:error="onError">
                  </div>
                </div>
                <div class="flex-between-center pay-line">
                  <div>持卡人姓名</div>
                  <div class="flex-between-center pay-line-right">
                    <div class="line-value">{{payWay[acPayIndex].name}}</div>
                    <img src="../../assets/deal/copy-icon.png" alt="" class="pay-copy"
                      v-clipboard:copy="payWay[acPayIndex].name" v-clipboard:success="copy" v-clipboard:error="onError">
                  </div>
                </div>
                <div class="flex-between-center pay-line">
                  <div>所属银行</div>
                  <div class="flex-between-center pay-line-right">
                    <div class="line-value">{{payWay[acPayIndex].account_num}}</div>
                    <img src="../../assets/deal/copy-icon.png" alt="" class="pay-copy"
                      v-clipboard:copy="payWay[acPayIndex].account_num" v-clipboard:success="copy"
                      v-clipboard:error="onError">
                  </div>
                </div>
              </div>
              <div class="usdt-div" v-else-if="payWay[acPayIndex].status == 4">
                <div class="pay-ewm-div">
                  <img :src="payWay[acPayIndex].receive_qrcode" alt="" class="img-s-h" @click="blowImg('code')">
                </div>
                <!-- <div class="usdt-save-btn">保存二维码至相册</div> -->
                <div class="usdt-addr-title">充币地址</div>
                <div class="usdt-url van-multi-ellipsis--l2">{{payWay[acPayIndex].account_num}}</div>
                <div class="copy-url-btn" v-clipboard:copy="payWay[acPayIndex].account_num" v-clipboard:success="copy"
                  v-clipboard:error="onError">复制</div>
              </div>
            </div>
            <div class="flex-between-center card-div card-div-2" v-else>
              <span class="sell-tag-title">卖方还未完善收款方式</span>
            </div>
          </div>
          <div class="deal-card" v-if="type == 'sell' && coin.status == 1">
            <div class="deal-title">买方上传的支付凭证：</div>
            <div class="flex-between-center card-div card-div-2">
              <span class="sell-tag-title">买方还未上传支付凭证</span>
              <u-count-down :time="coin.less_time" v-if="coin.less_time > 0" format="HH:mm:ss" @finish="onFinish">
              </u-count-down>
              <u-count-down :time="coin.less_time" v-else format="HH:mm:ss"></u-count-down>
              <span>后取消</span>
            </div>
          </div>
          <div class="deal-toast">
            <div class="toast-title">
              <img src="../../assets/deal/tag-icon.png" alt="" class="toast-icon">
              <span>交易提示</span>
            </div>
            <div class="deal-content" v-html="content"></div>
          </div>
          <!-- 买家 -->
          <div class="vant-btn deal-footer" v-if="type == 'buy' && coin.status == 1">
            <div class="footer-left submit-time">
              <u-count-down :time="coin.less_time" v-if="coin.less_time > 0" format="HH:mm:ss" @finish="onFinish">
              </u-count-down>
              <u-count-down :time="coin.less_time" v-else format="HH:mm:ss"></u-count-down>
              后超时取消
            </div>
            <u-button @click="goLast">上传支付凭证</u-button>
          </div>
        </div>
      </div>
    </transition>
    <transition name="van-slide-right">
      <div v-show="stepIndex === 2" class="transition-div">
        <div class="container deal-content">
          <div class="flex-between-center step-list">
            <div class="flex-between-center step-item" v-for="(item,index) in changeStepList" :key="index"
              :class="item.status == 1 ? '' : 'active-step'">
              <div class="step-line" v-if="index != 0"></div>
              <div class="step-info">
                <img src="../../assets/deal/inactive-icon.png" alt="" class="step-icon" v-if="item.status == 1">
                <img src="../../assets/deal/active-icon.png" alt="" class="step-icon" v-if="item.status == 2">
                <div class="step-title">{{item.name}}</div>
              </div>
            </div>
          </div>
          <div class="deal-card">
            <div class="deal-title">{{type == 'buy' ? '卖方' : '买方'}}信息</div>
            <div class="card-div">
              <div class="flex-between-center user-top">
                <div class="user-name">{{user.user}}</div>
                <div class="flex-between-center user-pay">
                  <img :src="item == 1 ? alipayImg : item == 2 ? wechatImg : item == 3 ? bankImg : ''" alt=""
                    class="pay-img" v-for="(item,index) in payType" :key="index" v-if="item != 4">
                </div>
              </div>
              <div class="flex-between-center user-btm">
                <div class="user-tel">电话：<span class="font-family-din">{{user.tel}}</span></div>
                <a :href="'tel:'+user.tel" class="user-phone"><img src="@/assets/deal/phone.png" alt=""
                    class="user-phone"></a>
              </div>
            </div>
          </div>
          <div class="deal-card">
            <div class="deal-title">{{type == 'buy' ? '购买' : '卖出'}}的货币信息</div>
            <div class="card-div">
              <div class="flex-between-center user-btm">
                <div class="user-tel">数量：<span class="font-family-din">{{coin.num}}</span></div>
                <div class="user-tel">单价（CYN）<span class="font-family-din">{{coin.price}}</span></div>
              </div>
              <div class="flex-between-center user-btm">
                <div class="user-tel">交易金额（CYN）：<span class="font-family-din price">{{coin.total_price}}</span></div>
              </div>
            </div>
          </div>
          <div class="deal-card">
            <div class="deal-title">{{type == 'sell' ? '买方' : ''}}上传的支付凭证：</div>
            <div class="flex-between-center input-line-img">
              <u-upload width="250" height="250" uploadIcon="plus" v-if="type == 'buy'" uploadText='添加支付凭证'
                :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"
                class="camera-btm-div">
              </u-upload>
              <image v-else v-if="type != 'buy' && coin.status != 1" :src="urlBase" mode="widthFix"></image>
              <div class="camera-btm-div" v-else>
                <div class="flex-between-center ewm-div">
                  <img :src="imageY" alt="" class="img-s-h" @click.stop="blowImg('voucher')">
                </div>
              </div>
            </div>
            <div class="flex-between-center upload-toast" v-if="type == 'buy'">
              <img src="@/assets/deal/tag-icon.png" alt="" class="tag-icon">
              <span>若支付凭证上传错误 请及时电话联系对方</span>
            </div>
          </div>
          <div class="deal-toast">
            <div class="toast-title">
              <img src="../../assets/deal/tag-icon.png" alt="" class="toast-icon">
              <span>交易提示</span>
            </div>
            <div class="deal-content" v-html="content"></div>
          </div>
          <!-- 买家 -->
          <div class="vant-btn deal-footer" v-if="type == 'buy' && coin.status == 1">
            <div class="footer-left submit-time">
              <u-count-down :time="coin.less_time" v-if="coin.less_time > 0" format="HH:mm:ss" @finish="onFinish" />
              <u-count-down :time="coin.less_time" v-else format="HH:mm:ss" :auto-start="false" />
              后超时取消
            </div>
            <u-button @click="uploadVoucher">上传支付凭证</u-button>
          </div>
          <div class="vant-btn deal-footer" v-if="type == 'buy' && coin.status == 2">
            <div class="footer-left submit-time">
              <u-count-down :time="coin.less_time" v-if="coin.less_time > 0" format="HH:mm:ss" @finish="onFinish" />
              <u-count-down :time="coin.less_time" v-else format="HH:mm:ss" :auto-start="false" />
              后超时取消
            </div>
            <u-button class="wait-btn">等待对方确认</u-button>
          </div>
          <!-- 卖家 -->
          <div class="vant-btn deal-footer" v-if="coin.status == 2 && type == 'sell'">
            <u-button class="deal-appeal" @click="shensuBtn(id)">申诉</u-button>
            <div class="footer-left submit-time">
              <u-count-down :time="coin.less_time" v-if="coin.less_time > 0" format="HH:mm:ss" @finish="onFinish" />
              <u-count-down :time="coin.less_time" v-else format="HH:mm:ss" :auto-start="false" />
              后交易完成
            </div>
            <u-button class="deal-submit" @click="submitVoucher">确认</u-button>
          </div>
        </div>
      </div>
    </transition>
    <transition name="van-slide-right">
      <div v-show="stepIndex === 3" class="transition-div">
        <div class="container deal-content">
          <div class="flex-between-center step-list">
            <div class="flex-between-center step-item" v-for="(item,index) in changeStepList" :key="index"
              :class="item.status == 1 ? '' : 'active-step'">
              <div class="step-line" v-if="index != 0"></div>
              <div class="step-info">
                <img src="../../assets/deal/inactive-icon.png" alt="" class="step-icon" v-if="item.status == 1">
                <img src="../../assets/deal/active-icon.png" alt="" class="step-icon" v-if="item.status == 2">
                <div class="step-title">{{item.name}}</div>
              </div>
            </div>
          </div>
          <div class="deal-card">
            <div class="deal-title">{{type == 'buy' ? '卖方' : '买方'}}信息</div>
            <div class="card-div">
              <div class="flex-between-center user-top">
                <div class="user-name">{{user.user}}</div>
                <div class="flex-between-center user-pay">
                  <img :src="item == 1 ? alipayImg : item == 2 ? wechatImg : item == 3 ? bankImg : ''" alt=""
                    class="pay-img" v-for="(item,index) in payType" :key="index" v-if="item != 4">
                </div>
              </div>
              <div class="flex-between-center user-btm">
                <div class="user-tel">电话：<span class="font-family-din">{{user.tel}}</span></div>
                <a :href="'tel:'+user.tel" class="user-phone"><img src="@/assets/deal/phone.png" alt=""
                    class="user-phone"></a>
              </div>
            </div>
          </div>
          <div class="deal-card">
            <div class="deal-title">{{type == 'buy' ? '购买' : '卖出'}}的货币信息</div>
            <div class="card-div">
              <div class="flex-between-center user-btm">
                <div class="user-tel">数量：<span class="font-family-din">{{coin.num}}</span></div>
                <div class="user-tel">单价（CYN）<span class="font-family-din">{{coin.price}}</span></div>
              </div>
              <div class="flex-between-center user-btm">
                <div class="user-tel">交易金额（CYN）：<span class="font-family-din price">{{coin.total_price}}</span></div>
              </div>
            </div>
          </div>
          <div class="deal-card">
            <div class="deal-title">{{type == 'sell' ? '买方' : ''}}上传的支付凭证：</div>
            <div class="flex-between-center input-line-img">
              <div class="camera-btm-div">
                <div class="flex-between-center ewm-div">
                  <img :src="imageY" alt="" class="img-s-h" @click.stop="blowImg('voucher')">
                </div>
              </div>
            </div>
            <div class="flex-between-center upload-toast" v-if="type == 'buy'">
              <img src="@/assets/deal/tag-icon.png" alt="" class="tag-icon">
              <span>若支付凭证上传错误 请及时电话联系对方</span>
            </div>
          </div>
          <div class="deal-toast">
            <div class="toast-title">
              <img src="../../assets/deal/tag-icon.png" alt="" class="toast-icon">
              <span>交易提示</span>
            </div>
            <div class="deal-content" v-html="content"></div>
          </div>
          <!-- 买家 -->
          <div class="vant-btn deal-footer" v-if="type == 'buy' && coin.status == 2">
            <div class="footer-left submit-time">
              <u-count-down :time="coin.less_time" v-if="coin.less_time > 0" format="HH:mm:ss" @finish="onFinish" />
              <u-count-down :time="coin.less_time" v-else format="HH:mm:ss" :auto-start="false" />
              后超时取消
            </div>
            <u-button class="wait-btn">等待对方确认</u-button>
          </div>
        </div>
      </div>
    </transition>
    <transition name="van-slide-right">
      <div v-show="stepIndex === 4" class="transition-div">
        <div class="container deal-content">
          <div class="flex-between-center step-list">
            <div class="flex-between-center step-item" v-for="(item,index) in changeStepList" :key="index"
              :class="item.status == 1 ? '' : 'active-step'">
              <div class="step-line" v-if="index != 0"></div>
              <div class="step-info">
                <img src="../../assets/deal/inactive-icon.png" alt="" class="step-icon" v-if="item.status == 1">
                <img src="../../assets/deal/active-icon.png" alt="" class="step-icon" v-if="item.status == 2">
                <div class="step-title">{{item.name}}</div>
              </div>
            </div>
          </div>
          <div class="deal-card">
            <div class="deal-title">{{type == 'buy' ? '卖方' : '买方'}}信息</div>
            <div class="card-div">
              <div class="flex-between-center user-top">
                <div class="user-name">{{user.user}}</div>
                <div class="flex-between-center user-pay">
                  <img :src="item == 1 ? alipayImg : item == 2 ? wechatImg : item == 3 ? bankImg : ''" alt=""
                    class="pay-img" v-for="(item,index) in payType" :key="index" v-if="item != 4">
                </div>
              </div>
              <div class="flex-between-center user-btm">
                <div class="user-tel">电话：<span class="font-family-din">{{user.tel}}</span></div>
                <a :href="'tel:'+user.tel" class="user-phone"><img src="@/assets/deal/phone.png" alt=""
                    class="user-phone"></a>
              </div>
            </div>
          </div>
          <div class="deal-card">
            <div class="deal-title">{{type == 'buy' ? '购买' : '卖出'}}的货币信息</div>
            <div class="card-div">
              <div class="flex-between-center user-btm">
                <div class="user-tel">数量：<span class="font-family-din">{{coin.num}}</span></div>
                <div class="user-tel">单价（CYN）<span class="font-family-din">{{coin.price}}</span></div>
              </div>
              <div class="flex-between-center user-btm">
                <div class="user-tel">交易金额（CYN）：<span class="font-family-din price">{{coin.total_price}}</span></div>
              </div>
            </div>
          </div>
          <div class="deal-card">
            <div class="deal-title">{{type == 'sell' ? '买方' : ''}}上传的支付凭证：</div>
            <div class="flex-between-center input-line-img">
              <u-upload width="250" height="250" uploadIcon="plus" v-if="type == 'buy'" uploadText='添加支付凭证'
                :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"
                class="camera-btm-div">
              </u-upload>
              <image v-else v-if="type != 'buy' && coin.status != 1" :src="urlBase" mode="widthFix"></image>
            </div>
            <div class="flex-between-center upload-toast" v-if="type == 'buy'">
              <img src="@/assets/deal/tag-icon.png" alt="" class="tag-icon">
              <span>若支付凭证上传错误 请及时电话联系对方</span>
            </div>
          </div>
          <div class="deal-toast">
            <div class="toast-title">
              <img src="../../assets/deal/tag-icon.png" alt="" class="toast-icon">
              <span>交易提示</span>
            </div>
            <div class="deal-content" v-html="content"></div>
          </div>
        </div>
      </div>
    </transition>

    <u-popup :show="payShow" @close="payShow = false" mode="bottom" :round="20" :closeable="true">
      <div class="pop-div div-sizing">
        <div class="pop-title">选择支付方式</div>
        <div class="pay-list">
          <div class="flex-between-center pay-item" v-for="(item,index) in payWay" :key="index"
            :class="acPayIndex == index ? 'ac-pay-item' : ''" @click="alterPay(index)">
            <img
              :src="item.status == 1 ? alipayImg : item.status == 2 ? wechatImg : item.status == 3 ? bankImg : item.status == 4 ? USDTImg1 : ''"
              alt="" class="pay-img">
            <span>{{item.status == 1 ? '支付宝' : item.status == 2 ? '微信' : item.status == 3 ? '银行卡' : item.status == 4 ? 'USDT' : ''}}支付</span>
          </div>
        </div>
      </div>
    </u-popup>
    <!-- 图片放大组件 -->
    <!-- <van-image-preview v-model="show" :images="images" :show-index="false" :closeable="true" swipe-duration="100" /> -->
  </div>
</template>

<script>
  import {
    getOrderDetail,
    putUploadOrder,
    putSureOrder
  } from '@/api/deal/index.js'
  import {
    url_config
  } from '@/common/config.js'
  export default {
    filters: {
      fixTitle(val) {
        return val == 'buy' ? '上传支付凭证' : '确认支付凭证'
      }
    },
    data() {
      return {
        fileList1: [],
        alipayImg: require('@/assets/deal/alipay.png'),
        wechatImg: require('@/assets/deal/wechat.png'),
        bankImg: require('@/assets/deal/bank.png'),
        USDTImg: require('@/assets/deal/usdt.png'),
        USDTImg1: require('@/assets/deal/usdt1.png'),
        stepIndex: 0, //步骤
        stepBuyList: [{
          name: '下订单',
          status: 2,
        }, {
          name: '去线下付款',
          status: 1,
        }, {
          name: '点击已上传凭证',
          status: 1,
        }, {
          name: '等待对方确认',
          status: 1,
        }], //买方步骤
        stepSellList: [{
          name: '下订单',
          status: 2,
        }, {
          name: '等待对方付款',
          status: 1,
        }, {
          name: '确认支付凭证',
          status: 1,
        }], //卖方步骤
        changeStepList: [], //使用步骤
        image: '', //上传实际地址
        imageY: '', //凭证预览地址
        content: '', //提示
        payShow: false, //选择支付方式
        user: {}, //对方信息
        coin: {
          orderInfo: 'buy'
        }, //订单信息
        payWay: [], //支付方式
        acPayIndex: 0, //实际选择支付下标
        payType: [], //支付类型
        id: '', //订单id
        type: '', //buy买方 sell卖方
        show: false, // 放大图片组件显示
        images: [], // 放大的图片数组
      }
    },
    onLoad(opt) {
      if (opt.id) {
        this.id = opt.id
        //   this.type = this.$route.query.type
        this.getInfo()
      } else {
        this.$ui.toast('参数错误')
      }
    },
    methods: {
      shensuBtn(id) {
        this.$ui.push('/pages/deal/appeal_work?id=' + id)
      },
      getInfo() {
        let vm = this
        getOrderDetail({
          id: vm.id
        }).then(res => {
          vm.getInfoBack(res)
        }, () => {
          setTimeout(() => {
            uni.navigateBack()
          }, 500)
        })
      },
      getInfoBack(res) {
        let vm = this
        if (res.code == 1) {
          vm.user = res.data.order
          let coin = res.data.coin
          coin.less_time = coin.less_time * 1000
          vm.coin = coin
          vm.payWay = coin.pay_way || []
          vm.payType = coin.pay_type || []
          vm.type = coin.orderInfo
          let status = vm.coin.status
          if (vm.type == 'buy') {
            let stepList = vm.stepBuyList
            if (status == 1) {
              vm.stepIndex = 1
              if (vm.payWay.length > 0) {
                vm.acPayIndex = 0
              }
            } else if (status == 2) {
              vm.stepIndex = 3
              stepList[1].status = 2
              stepList[2].status = 2
              vm.imageY = vm.coin.voucher
            } else if (status == 3) {
              vm.stepIndex = 4
              stepList[1].status = 2
              stepList[2].status = 2
              stepList[3].status = 2
              vm.imageY = vm.coin.voucher
            } else {
              uni.navigateBack()
            }
            vm.changeStepList = stepList
          } else {
            let stepList = vm.stepSellList
            if (status == 1) {
              this.stepIndex = 1
            } else if (status == 2) {
              vm.stepIndex = 2
              stepList[1].status = 2
              vm.imageY = vm.coin.voucher
            } else if (status == 3) {
              vm.stepIndex = 3
              stepList[1].status = 2
              stepList[2].status = 2
              vm.imageY = vm.coin.voucher
            } else {
              uni.navigateBack()
            }
            vm.changeStepList = stepList
          }
        } else {
          setTimeout(() => {
            uni.navigateBack()
          }, 500)
        }
      },
      goLast() {
        let vm = this
        vm.stepIndex += 1
        setTimeout(() => {
          vm.changeStepList[vm.stepIndex - 1].status = 2
        }, 300)
      },
      goBack() {
        if (this.type == 'buy' && this.coin.status == 1 && this.stepIndex == 2) {
          this.changeStepList[this.stepIndex - 1].status = 1
          this.stepIndex -= 1
        } else {
          this.$router.go(-1)
        }
      },
      onFinish() {
        this.getInfo()
      },
      // 确认上传支付凭证
      uploadVoucher() {
        let vm = this
        if (vm.image == '') {
          vm.$ui.toast('请上传支付凭证')
        } else {
          putUploadOrder({
            id: vm.id,
            voucher: vm.image
          }).then(res => {
            if (res.code == 1) {
              vm.$ui.toast(res.msg)
              setTimeout(() => {
                uni.navigateBack()
              }, 500)
              // vm.getInfo()
            }
          })
        }
      },
      // 确认凭证
      submitVoucher() {
        let vm = this
        putSureOrder({
          id: vm.id
        }).then(res => {
          if (res.code == 1) {
            vm.$ui.toast(res.msg)
            uni.navigateBack()
            // vm.getInfo()
          } else {
            vm.$ui.toast(res.msg)
          }
        })
      },
      // 删除图片
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },
      // 新增图片
      async afterRead(event) {
        // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
        let lists = [].concat(event.file)
        let fileListLen = this[`fileList${event.name}`].length
        lists.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url)
          console.log(result, 1231456789);
          if (result.code == 1) {
            this.image = result.url
          } else {
            this.$ui.toast('上传失败')
          }
          let item = this[`fileList${event.name}`][fileListLen]
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
          }))
          fileListLen++
        }
      },
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: `${url_config}/api/upload/uploads`, // 仅为示例，非真实的接口地址
            filePath: url,
            name: 'file',
            formData: {
              user: 'test'
            },
            success: (res) => {
              const date = JSON.stringify(res.data)
              setTimeout(() => {
                resolve(JSON.parse(res.data))
              }, 1000)
            }
          });
        })
      },
      // 切换支付方式
      alterPay(index) {
        this.acPayIndex = index
        this.payShow = false
      },
      // 选择支付方式 显示弹窗
      changePay() {
        let vm = this
        vm.changeAcIndex = vm.acPayIndex
        vm.payShow = true
      },
      // 返回一个特定的 DOM 节点，作为挂载的父节点
      getContainer() {
        return document.querySelector('.deal-info');
      },
      // 点击放大图片
      blowImg(type) {
        if (type === 'code') {
          this.images[0] = this.payWay[this.acPayIndex].receive_qrcode
        } else {
          if (this.imageY == '') {
            return;
          }
          this.images[0] = this.imageY
        }
        this.show = true
      },
      // 复制成功时的回调函数
      copy(e) {
        this.$ui.toast('复制成功！')
      },
      // 复制失败时的回调函数
      onError(e) {
        this.$ui.toast.error('抱歉，复制失败！')
      }
    }
  }
</script>

<style lang="less" scoped>
  .deal-info {
    top: 0;
    height: 100vh;
    background: #F2F2F2;

    .transition-div {
      width: 100%;
      height: 100%;
    }

    header {
      width: 100%;
      height: 1.7rem;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
      // background-color: rgba(#ffffff,0);
    }

    .header {
      width: 100%;
      height: 1.7rem;
      position: absolute;
      bottom: 0;
      top: constant(safe-area-inset-top);
      top: env(safe-area-inset-top);
      left: 0;
      overflow: hidden;
      padding-top: 0.5rem;
      box-sizing: border-box;
      background: #ffffff;
      z-index: 99;

      .van-nav-bar {
        height: 1.2rem;
        line-height: 1.2rem;
        background: #ffffff;
      }

      .van-icon {
        color: #282828;
        font-size: 0.42rem;
      }
    }

    .deal-content {
      padding-left: 20rpx;
      padding-right: 20rpx;
      padding-bottom: 120rpx;
      background: #F2F2F2;

      .step-list {
        padding: 30rpx 10rpx;
        padding-bottom: 46rpx;
        margin-bottom: 30rpx;
        justify-content: space-around;

        .step-item {
          position: relative;

          .step-icon {
            width: 34rpx;
            height: 34rpx;
            // margin-bottom: 14rpx;
          }

          .step-info {
            overflow: initial;
            position: relative;
          }

          .step-line {
            width: 70rpx;
            height: 2rpx;
            background: #8A8C9B;
            margin-right: 48rpx;
          }

          .step-title {
            width: 170rpx;
            display: inline-block;
            position: absolute;
            bottom: -46rpx;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(#282828, .5);
            font-size: 22rpx;
            text-align: center;
          }
        }

        .active-step {
          .step-title {
            color: #3A78FF;
          }

          .step-line {
            background: #3A78FF;
          }
        }
      }

      .deal-card {
        margin-bottom: 30rpx;

        .deal-title {
          margin-bottom: 20rpx;
        }

        .card-div {
          padding: 20rpx;
          background: #FFFFFF;

          .pay-img {
            width: 40rpx;
            height: 40rpx;
            margin-left: 20rpx;
          }

          .user-top {
            .user-name {
              max-width: 300rpx;
            }
          }

          .user-btm {
            margin-top: 18rpx;

            .user-tel {
              color: rgba(#202020, .8);

              .font-family-din {
                color: #202020;
              }

              .price {
                font-size: 36rpx;
                color: #FF0000;
              }
            }

            .user-phone {
              width: 48rpx;
              height: 48rpx;
            }
          }

          .payment-change {
            margin-bottom: 44rpx;

            .change-left {
              .pay-img {
                margin: 0 10rpx 0 0;
              }

              .change-img {
                width: 32rpx;
                height: 32rpx;
                margin-right: 10rpx;
              }
            }
          }

          .pay-line {
            font-size: 26rpx;
            margin-bottom: 18rpx;

            .pay-copy {
              width: 32rpx;
              height: 32rpx;
              margin-left: 20rpx;
            }
          }

          .usdt-div {
            display: flex;
            flex-direction: column;
            align-items: center;
          }

          .pay-ewm-div {
            width: 322rpx;
            height: 324rpx;
            border-radius: 4rpx;
            margin: 40rpx auto 0;
            background: #366FED;
          }

          .usdt-save-btn {
            width: 250rpx;
            height: 52rpx;
            line-height: 52rpx;
            margin-top: 16rpx;
            text-align: center;
            font-size: 24rpx;
            color: #ffffff;
            background: #3B83FC;
            border-radius: 4rpx;
          }

          .usdt-addr-title {
            color: #0F0F0F;
            margin-top: 38rpx;
            font-size: 28rpx;
          }

          .usdt-url {
            width: 444rpx;
            text-align: center;
            color: #949494;
            font-size: 24rpx;
            margin-bottom: 18rpx;
          }

          .copy-url-btn {
            width: 90rpx;
            height: 42rpx;
            line-height: 42rpx;
            text-align: center;
            color: #ffffff;
            font-size: 24rpx;
            background: #3B83FC;
            border-radius: 4rpx;
          }
        }

        .card-div-2 {
          height: 128rpx;
          justify-content: center;

          .sell-tag-title {
            color: #FF0000;
            margin-right: 20rpx;
          }

          .u-count-down {
            color: #282828;
            font-size: 28rpx;
          }
        }

        .input-line-img {
          justify-content: center;
          margin-top: 30rpx;

          image {
            width: 500rpx;
          }

          .ewm-div {
            width: 376rpx;
            height: 368rpx;
            border-radius: 4rpx;
            background: #FFFFFF;
            flex-direction: column;
            justify-content: center;
            position: relative;

            .ewm-j {
              font-size: 80rpx;
              color: rgba(#282828, .5);
              margin-bottom: 16rpx;
            }

            .img-s-h {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
            }

            span {
              color: rgba(#282828, .5);
            }
          }
        }

        .upload-toast {
          justify-content: center;
          font-size: 24rpx;
          margin-top: 10rpx;

          .tag-icon {
            width: 24rpx;
            height: 24rpx;
            margin: 20rpx;
          }
        }
      }

      .deal-footer {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        background: #FFFFFF;

        .footer-left {
          flex: 1;
          color: rgba(#FFFFFF, .8);
          padding: 0 20rpx;
          text-align: right;
          display: flex;
          justify-content: flex-end;
          align-items: center;

          .u-count-down {
            color: rgba(#FFFFFF, .8);
          }
        }

        .u-button {
          width: 346rpx;
          height: 88rpx;
          border-radius: 0;
        }

        .deal-appeal {
          width: 192rpx;
          height: 88rpx;
          background: #1C233F;
        }

        .submit-time {
          margin-right: -2rpx;
          background: #5A5A5A;
        }

        .deal-submit {
          width: 200rpx;
        }

        .wait-btn {
          background: rgba(#3B83FC, .5);
        }
      }
    }

    .deal-toast {
      color: #8D8D8D;

      .toast-title {
        display: flex;
        align-items: center;
      }

      .deal-content {
        margin-top: 20rpx;
      }

      .toast-icon {
        width: 34rpx;
        height: 34rpx;
        margin-right: 10rpx;
      }
    }

    .pop-div {
      min-height: 554rpx;
      max-height: 630rpx;
      padding: 0;

      .pop-title {
        margin-bottom: 80rpx;
      }

      .pay-list {
        .pay-item {
          justify-content: center;
          padding: 44rpx 0;
          border-bottom: 2rpx solid #3D85EA;

          &:last-child {
            border: none;
          }

          .pay-img {
            width: 40rpx;
            height: 40rpx;
            margin-right: 20rpx;
          }
        }

        .ac-pay-item {
          background: rgba(#3D85EA, .5);
        }
      }
    }
  }

  .pay-img {
    width: 40rpx;
    height: 40rpx;
  }
</style>
